<template>
  <el-form-item :prop="prop" :label="label" :rules="rulesList">
    <el-input v-model.number="minNumber" type="number" :placeholder="placeholder||placeholderText" clearable @mousewheel.native.prevent />
    ~
    <el-input v-model.number="maxNumber" type="number" :placeholder="placeholder||placeholderText" clearable @mousewheel.native.prevent />
  </el-form-item>
</template>

<script>
import { mixin } from './mixin'

export default {
  name: 'NumberRange',
  mixins: [mixin],
  props: {
    min: null,
    max: null
  },
  data() {
    return {
      placeholderText: '请输入'
    }
  },
  computed: {
    minNumber: {
      get() {
        return this.min
      },
      set(val) {
        this.$emit('update:min', val)
      }
    },
    maxNumber: {
      get() {
        return this.max
      },
      set(val) {
        this.$emit('update:max', val)
      }
    }
  },
  methods: {
    setRules() {
      this.rulesList = [].concat(this.rules)
      if (this.required) {
        this.rulesList.push({ required: true, message: ' ', trigger: 'change' })
      }
      this.rulesList.push({ validator: (rule, value, callback) => {
        if (this.required) {
          if (!this.minNumber && this.minNumber !== 0) {
            callback(new Error(' '))
          }
          if (!this.maxNumber && this.maxNumber !== 0) {
            callback(new Error(' '))
          }
          if (this.minNumber > this.maxNumber) {
            callback(new Error(' '))
          }
        }
        callback()
      }, trigger: 'blur' })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-input{
  max-width: 120px;
}
</style>
